<template>
  <div class="raw-style" style="width: 100%;height: 100%;overflow-y: auto;" ref="content_outer">
    <v-md-preview :text="text"></v-md-preview>
  </div>
</template>

<script>
import {iframe} from "@/js/tool.js";
import {ajax} from "@/js/api_tool.js";

export default {
  props: ['__iframe'],
  data(){
    return {
      text: '# 说明文档'
    }
  },
  methods: {
    get_md(path){
      return new Promise((resolve)=>{
        ajax(`/admin/api/markdown?path=${path}`, function (res){
          resolve(res.data);
        })
      })
    },
    back(){
      if (this.__iframe){
        iframe.remove('help');
      }else {
        this.$router.back();
      }
    },
    jump_to(){
      //锚点跳转
      let jump = this.$get('jump','');
      if (!jump) return;
      let outer = this.$refs.content_outer;
      jump = outer.querySelector(jump);
      if (!jump) return;
      let r_outer =  outer.getBoundingClientRect();
      let r_jump =  jump.getBoundingClientRect();
      let dt_y = r_jump.top - r_outer.top;
      outer.scrollTop = dt_y;
    },
  },
  mounted() {
    let app = this;
    if (!this.__iframe) window['app'] = this;

    let name = this.$get('name', '');
    if (!name) return this.back();

    this.get_md(name).then(function (text){
      app.text = text;
      setTimeout(function(){app.jump_to()},500);
    }).catch(()=>{ app.back(); })
  }
}
</script>

<style scoped>

</style>